<template>
  <div id="InventoryWork">
    <root name="InventoryWork">
      <SafeHeader
        v-bind="{
          title: '盘点',
          isBack: true,
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <v-tabs fixed-tabs height="40" v-model="tab">
        <v-tab class="wms-tab"> 盘点作业 </v-tab>
        <!--<v-tab class="wms-tab"> 盘点明细 </v-tab>-->
        <!-- 任务页面 -->
        <v-tab-item class="task" transition="slide-y-transition" style="height: calc(100% - 40px)">

          <v-container
            class="my-4 white lighten-5 py-2"
            style="line-height: 1.75rem"
          >
            <v-row >
              <v-col cols="3" class="py-1 card-lable">盘点库位</v-col>
              <v-col class="py-2 card-value">{{
                form.cellCode
                }}</v-col>
            </v-row>


            <!--容器编码-->
            <v-row >
              <v-col cols="3" class="py-1 card-lable">容器编码</v-col>
              <!--<input  :value="form.contCode" placeholder="请扫描容器编码" @input="changeContValue"/>-->
              <v-col class="py-1">
                <v-text-field
                  class="my-0"
                  dense
                  hide-details
                  v-model="form.boxCode"
                  @keydown.13="taskCodeSearch"
                  placeholder="请扫描容器编码"
                >
                </v-text-field>
              </v-col>
            </v-row>

            <v-row >
              <v-col cols="3" class="py-1 card-lable">批次</v-col>
              <v-col class="py-2 card-value">{{form.itemPc}}</v-col>
              <!--<v-col class="py-1">-->
                <!--&lt;!&ndash; v-model=""&ndash;&gt;-->
                <!--<v-text-field-->
                  <!--class="my-0"-->
                  <!--dense-->
                  <!--hide-details-->
                  <!--:value="form.itemPc"-->
                <!--&gt;-->
                <!--</v-text-field>-->
              <!--</v-col>-->
            </v-row>

            <v-row >
              <v-col cols="3" class="py-1 card-lable">物料编码</v-col>
              <v-col class="py-2 card-value">{{form.itemCode}}</v-col>
              <!--<v-col class="py-1">-->
                <!--<v-text-field-->
                  <!--class="my-0"-->
                  <!--dense-->
                  <!--hide-details-->
                  <!--:value="form.itemCode"-->
                <!--&gt;-->
                <!--</v-text-field>-->
              <!--</v-col>-->
            </v-row>

            <v-row >
              <v-col cols="3" class="py-1 card-lable">物料名称</v-col>
              <v-col class="py-2 card-value">{{form.itemName}}</v-col>
            </v-row>

            <v-row >
              <v-col cols="3" class="py-1 card-lable">库存数量</v-col>
              <v-col class="py-2 card-value">{{form.quantity}}</v-col>
            </v-row>


            <v-row class="mt-0">
              <v-col cols="3" class="py-2 d-flex align-center card-lable">
                <span>数量</span>
              </v-col>
              <v-col class="py-1">
                <v-text-field
                  class="my-0"
                  dense
                  hide-details
                  v-model="form.taskQuantity"
                  placeholder="请输入实际盘点数量"
                >
                </v-text-field>
              </v-col>
            </v-row>

          </v-container>


          <div v-show="hidshow"  class="footer">
            <v-bottom-navigation

              grow
              style="background: transparent; box-shadow: none"
              class="navigationBtns"
            >
              <v-row
                class="pa-0 ma-0 justify-center"
                style="background: transparent"
              >
                <v-col
                  cols="12"
                  class="pa-0 ma-0 d-flex justify-center align-center mb-2 px-2"
                  style="background: transparent"
                >
                  <v-btn
                    class="wms-submit-btn"
                    block
                    style="
                      background-color: #193690;
                      height: 100%;
                      border-radius: 10px;
                    "
                 @click="commit">保存</v-btn>
                </v-col>
              </v-row>
            </v-bottom-navigation>
          </div>
        </v-tab-item>



        <div v-if="form.taskList[0]">
          <v-container v-for="(item, index) in form.taskList" :key="index">
            <v-row>
              <v-col cols="12" class="pa-0 pb-2">
                <v-card outlined style="background-color: #f2f3f5">
                  <v-card-subtitle>
                    <v-row
                      class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                    >
                      <v-col cols="4" class="py-1 card-lable">物料编码</v-col>
                      <v-col class="py-1 card-value">{{item.itemCode}}</v-col>
                    </v-row>
                    <v-row
                      class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                    >
                      <v-col cols="4" class="py-1 card-lable px-2">物料名称</v-col>
                      <v-col class="py-1 card-value px-2">{{item.itemName}}</v-col>
                    </v-row>

                    <v-row
                      class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                    >
                      <v-col cols="4" class="py-1 card-lable px-2">物料批次</v-col>
                      <v-col class="py-1 card-value px-2">{{item.itemPc}}</v-col>
                    </v-row>
                    <v-row
                      class="
                          pa-0
                          d-flex
                          flex-row
                          justify-space-between
                          wms-v-row
                        "
                    >
                      <v-col cols="4" class="py-1 card-lable px-2">物料数量</v-col>
                      <v-col class="py-1 card-value px-2">{{item.taskQuantity}}</v-col>
                    </v-row>
                  </v-card-subtitle>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
        </div>

      </v-tabs>
    </root>
    <v-overlay :value="overlay">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import { mdiCreditCardScan } from "@mdi/js";
import _ from "lodash";
import { apiList } from "@/static/apiList";
import Storage from "@/utils/storage.js";

export default {
  name: "InventoryWork",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      form:{
        boxCode:'',
        cellCode:'',
        itemCode:'',
        itemName:'',
        itemPc:'',
        contItemId:'',
        quantity:'',
        taskQuantity:'',
        taskList: [],
      },
      accept:{
        stockTakeMasterId:'',
        stockTakeTaskId:'',
        stockMasterCode:'',
        taskBillNo:'',
        wareId:'',
      },
      tableData: [],

      cellCode:'',

      mdiCreditCardScan: mdiCreditCardScan,
      docmHeight: document.documentElement.clientHeight,
      showHeight: document.documentElement.clientHeight,
      hidshow: true,
      overlay: false,
      tab: null,



      rules: {
        ctCodeRules: [(v) => !!v || "请扫描或输入拣货容器编码"],
        targetCtCodeRules: [(v) => !!v || "请扫描或输入目标容器编码"],
        prePickQtyRules: [(v) => !!v || "请输入需要拣货的数量"],
      },

      // 需要提交的数据
      pickForm: {
        pickTaskId: "", //拣货任务id
        pickQuantity: "", //拣货数量 理论推荐的数量
        srcBoxCode: "", //来源容器
        toBoxCode: "", //目标容器
        actQuantity: "", //实际输入的拣货数量  用于校验
        isAllPick: true,
      },

      targetCtCodeDisabled: true,
      msgDialog: false, // 原因弹框
      msgData: "", // 原因详情
      taskLogId:0
    };
  },

//  cellCode: this.form.cellCode, boxCode: this.form.contCode
  methods: {
    taskCodeSearch() {

      console.log("11");
      let params = {
        cellCode: this.form.cellCode,
        boxCode: this.form.boxCode,
      };
//      console.log("cellCode:" + params.cellCode );
      // 通过接口获取单号数据和列表
      this.overlay = true;
      wms.get({ url: "/inventorys/getStock", data: params }).then((res) => {
          if (
            res.status == 200 &&
            res.data.code == 200 &&
            !_.isEmpty(res.data.data)
          ) {
            //判断状态是否正确
            let dataObj = res.data.data;
            console.log("a:" + dataObj);
            console.log("11111:" + JSON.stringify(dataObj));
            this.taskInput = true;
            console.log("itemName:" + dataObj[0].itemName);
            this.form.itemPc = dataObj[0].batchName;
            this.form.itemCode = dataObj[0].itemCode;
            this.form.itemName = dataObj[0].itemName;
            this.form.quantity = dataObj[0].quantity;
            this.overlay = false;
          } else {
            this.overlay = false;
            //提示
            console.log("未查询到数据");
          }
        });
    },
//    itemList: this.form.tableData,
//    taskLogId: this.form.taskLogId

    commit() {
      const value = /^[0-9]*$/
//      let that = this;
      let item = {
        itemCode: this.form.itemCode,
        itemName: this.form.itemName,
        itemPc: this.form.itemPc,
        quantity: this.form.quantity,
//        buildNumber: this.form.buildNumber,
        taskQuantity: this.form.taskQuantity
      }
      this.tableData.push(item);
        let entity = {
          stockTakeMasterId: this.accept.stockTakeMasterId,
          stockMasterCode: this.accept.stockMasterCode,
          stockTaskId: this.accept.stockTakeTaskId,
          taskBillNo: this.accept.taskBillNo,
          wareId: this.accept.wareId,
          cellCode: this.form.cellCode,
          boxCode: this.form.boxCode,
          itemList: this.tableData,
          taskLogId: this.taskLogId
        }
      this.overlay = true;
      wms.post({ url: "/stock/take/log/insert", data: entity }).then((res) => {
        if (
          res.status == 200 &&
          res.data.code == 200 &&
          !_.isEmpty(res.data.data)
        ) {
          console.log("保存成功");
          this.form.itemCode = '';
          this.form.itemName = '';
          this.form.quantity = '';
          this.form.itemPc = '';
//          this.buildNumber = '';
          this.taskQuantity = '';
          alert("保存成功");
          //刷新页面
          window.location.reload();
        } else {
          alert("保存成功");
          this.form.itemCode = '';
          this.form.itemName = '';
          this.form.quantity = '';
          this.form.itemPc = '';
          this.taskQuantity = '';
          window.location.reload();
          this.overlay = false;
//          alert("保存失败");
          //提示
          console.log("保存失败");
        }
      });
    },



  },
  watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    },
  },

  mounted() {
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
    let pageParam;
    // 页面参数
    if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      pageParam = window.api.pageParam;
      this.form.cellCode = pageParam.cellCode;
      this.accept.stockTakeMasterId = pageParam.stockTakeMasterId;
      this.accept.stockTakeTaskId = pageParam.stockTakeTaskId;
      this.accept.stockMasterCode = pageParam.stockMasterCode;
      this.accept.taskBillNo = pageParam.taskBillNo;
      this.accept.wareId = pageParam.wareId;


      window.api.addEventListener(
        {
          name: "InventoryWork",
        },
        (res) => {
          console.log(res.value.cellCode);
          this.accept.stockTakeMasterId = res.value.stockTakeMasterId;
          this.accept.stockTakeTaskId = res.value.stockTakeTaskId;
          this.accept.stockMasterCode = res.value.stockMasterCode;
          this.accept.taskBillNo = res.value.taskBillNo;
          this.accept.wareId = res.value.wareId;
          this.form.cellCode = res.value.cellCode;
        }
      );
      // 浏览器
    } else {
      pageParam = this.$root.api.api.pageParam;

      this.accept.stockTakeMasterId = pageParam.stockTakeMasterId;
      this.accept.stockTakeTaskId = pageParam.stockTakeTaskId;
      this.accept.stockMasterCode = pageParam.stockMasterCode;
      this.accept.taskBillNo = pageParam.taskBillNo;
      this.accept.wareId = pageParam.wareId;
      this.form.cellCode = pageParam.cellCode;



      this.$root.api.api.addEventListener(
        {
          name: "InventoryWork",
        },
        (res) => {
          console.log(res.value.cellCode);
          this.form.cellCode = res.value.cellCode;
          this.accept.stockTakeMasterId = res.value.stockTakeMasterId;
          this.accept.stockTakeTaskId = res.value.stockTakeTaskId;
          this.accept.stockMasterCode = res.value.stockMasterCode;
          this.accept.taskBillNo = res.value.taskBillNo;
          this.accept.wareId = res.value.wareId;

        }
      );
    }
  },
};
</script>


<style lang="scss" scoped>
.v-tabs {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  ::v-deep .v-tabs-items {
    flex: 1;
    background-color: transparent;
    .v-window__container{
      height: 100%;
    }
  }
}

.footer {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.footer1 {
  position: absolute;
  padding-top: 20px;
  width: 100%;
  bottom: 0;
}

.list_content {
  flex-direction: column;
  padding: 8px;
  min-height: 5rem;
  .col {
    padding: 2px;
    min-height: 1rem;
    text-align: right;
  }
  .row {
    margin: 0;
    background-color: transparent !important;
  }
  .card-lable {
    text-align: left;
  }
  .card-value {
    text-align: left;
  }
}

.task {
  padding-bottom: 56px;
  &_from {
    background-color: #fff;
    margin-bottom: 6px;
    .v-text-field ::v-deep.v-input__prepend-inner {
      margin-top: 8px;
      display: flex;
      font-size: 0.875rem;
      min-width: 4rem;
      .v-input__append-inner .v-btn {
        padding: 0 10px;
        margin-bottom: 2px;
        .col {
          padding-bottom: 6px;
        }
      }
    }
    &_list .v-card__subtitle .row + .row {
      margin-top: 6px;
      justify-content: flex-end;
      padding-right: 10px;
      .col {
        padding: 6px 8px;
      }
    }
  }
}
.v-card__subtitle {
  display: flex;
  margin: 0;

  .row {
    margin: 0;
    background-color: #fff;
    .col {
      min-height: 1rem;
      padding: 8px;
    }
    .receiving_heard {
      border-top: 1px solid grey;
      font-size: 16px;
      font-weight: bold;
    }
    .row {
      background-color: inherit;
    }
  }
}

.v-card__text {
  padding: 0 10px !important;
  .row {
    margin: 0;
  }
  .col {
    padding: 8px;
    ::v-deep.v-input__prepend-outer {
      min-width: 2rem;
      margin-top: 10px;
    }
  }
}
.pickingCard {
  // background-color: skyblue;
  border-radius: 8px;
  box-shadow: 3px 3px 6px rgb(0 0 0 / 20%), 3px 3px 6px rgb(0 0 0 / 14%),
    3px 3px 6px rgb(0 0 0 / 12%) !important;
  .col {
    padding: 0;
  }
  .row {
    margin: 0;
    .col {
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      color: #979899;
    }
    .pickingCard_title {
      font-size: 15px;
      font-weight: bold;
      color: #f8a73c;
    }
  }
  .v-input--selection-controls {
    margin-top: 8px;
  }
  // 10px 10px 5px #888888
}
.pickingCard-bottom {
  background-color: #fff;
  .col {
  }
}
.btn-left {
  background-color: #fff !important;
  ::v-deep.v-btn__content {
    color: #193690 !important;
  }
}
.pickingForm {
  .row {
    margin: 0;
    .col {
      padding-bottom: 0;
      padding-top: 0;
    }
  }
}

.pickingWrap {
  padding-bottom: 66px;
}

::v-deep.navigationBtns .navigationBtns_return .v-btn__content {
  color: #193690;
}

::v-deep.v-bottom-navigation .v-btn__content {
  color: #fff;
  font-size: 1rem;
}

.inputPlaceholder ::v-deep.v-text-field__slot input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-moz-placeholder,
input:-ms-input-placeholder {
  font-size: 15px;
}
.boxCodeDialog_card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .boxCodeDialog_card_title {
    width: 100%;
    padding-top: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffc352;
    color: #fff;
    // padding: 12px 24px 8px !important;
  }
  .v-card__text {
    margin-top: 12px;
    flex: 1;
  }
  .boxCodeDialog_card_table {
    ::v-deep .text-start {
      padding: 0 8px !important;
    }
  }
  .v-card__actions {
    width: 100%;
  }
  .msgDialog_card_title {
    padding: 12px 24px 10px !important;
  }
}
</style>
